<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
	
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.Iterator" %>
<%@ page import ="com.easyattendance.services.AddTeacherService" %>
<%@ page import ="com.easyattendance.model.Teacher" %>
<%@ page import ="com.easyattendance.services.AddClassService" %>
<%@ page import ="com.easyattendance.model.Class" %>
<%@ page import ="com.easyattendance.services.AddTeacherService" %>
<%@ page import ="com.easyattendance.model.Teacher" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Class Teacher - Add Student</title>
<!-- <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> -->
<jsp:include page="../includeFiles.jsp" />

<link rel="stylesheet" href="<%=request.getContextPath()%>/views/css/ui/jquery-ui-1.10.4.custom.min.css">
<script src="<%=request.getContextPath()%>/public/js/ui/jquery.ui.core.js"></script>
<script src="<%=request.getContextPath()%>/public/js/ui/jquery.ui.widget.js"></script>
<script src="<%=request.getContextPath()%>/public/js/ui/jquery.ui.datepicker.js"></script>

<script>
	$(function() {
		$( "#student_dob" ).datepicker({
			dateFormat: 'yy-mm-dd'
		});
	});
</script>
</head>

<body class="left-sidebar">

<!-- Session check : user logged in or not/ press back button -->
<jsp:include page="../common/checkSession.jsp"></jsp:include>
<jsp:include page="../common/checkTeacherRole.jsp" />


<% String currentUser = (String) session.getAttribute("currentUser"); %>
<% AddTeacherService addTeacherService = new AddTeacherService();
   AddClassService addClassService = new AddClassService();
	String sectionId = addTeacherService.getSectionEmailIdByTeacherId(currentUser);
	String classId = addClassService.getClassIdByTeacherId(currentUser);%>
	
	<!-- Wrapper -->
	<div id="wrapper">

		<!-- Content -->
		<div id="content">
			<div id="content-inner">

				<!-- Login -->
						<div id="login_content">
						<header>
							<h2>Add Student</h2>
						</header>
						<span class="success_msg">${studentAdded}</span>
						<span class="error_msg">${null_values}</span>
						<span class="error_msg">${email_not_valid}</span>
						<span class="error_msg">${name_not_valid}</span>
						<span class="error_msg">${studentAlreadyExist}</span>
						<span class="error_msg">${classNotExist}</span>
						<span class="error_msg">${sectionNotExist}</span>
						<span class="error_msg">${studentNotAdded}</span>
						<span class="error_msg">${rollNoExists}</span>
						<!-- js validation Error display -->
						<div class="submit_errors_msg">
							<ul>
								<li id="submit_is_field_empty" class="submit_errors">All * fields are required.</li>
								<li id="submit_name_error" class="submit_errors">Name must be between 2 to 50 characters, allowed characters:A-Za-z0-9</li>
								<li id="submit_email_error" class="submit_errors">Email-id(s) is/are invalid.</li>
							</ul>
						</div>
						
						<form name="Add_Student" action="${pageContext.request.contextPath}/AddStudentServlet" method="post" onsubmit="return checkFormErrors();">
						
							<input type="hidden" id="action_type" name="action_type" value="create">
							
							<!-- Student Name -->
							<div>
								<label>First Name: <span class="error_msg">*</span></label>
								<input id="student_fname" name="student_fname" type="text" placeholder="First Name"  maxlength="32" tabindex="1">
							</div>
							<div id="name_error" class="error_info">
								<ul>
									<li id="name_empty" class="invalid">First name can't be empty.</li>
									<li id="name_length" class="invalid">Length must be between 2 to 32.</li>
									<li id="name_invalid" class="invalid">Only alphanumeric characters.</li>
								</ul>
							</div>
							<!-- Student Last Name -->
							<div>
								<label>Last Name: <span class="error_msg">*</span></label>
								<input id="student_lname" name="student_lname" type="text" placeholder="Roll Number"  maxlength="32" tabindex="2">
							</div>
							<!-- Student Roll No -->
							<div>
								<label>Roll Number: <span class="error_msg">*</span></label>
								<input id="student_roll_no" name="student_roll_no" type="text" placeholder="Last Name"  maxlength="3" tabindex="3">
							</div>
							<!-- Student Email -->
							<div>
								<label>Email ID: <span class="error_msg">*</span></label>
								<input id="student_email" name="student_email" type="email" placeholder="Email ID" maxlength="50" tabindex="4">
							</div>
							<!-- Email Validation error and success message area. -->
							<div id="email_error" class="error_info">
								<ul>
									<li id="email_empty" class="invalid">Email address cannot be empty.</li>
									<li id="email_invalid" class="invalid">Valid email address?</li>
								</ul>
							</div>
							<!-- Student Address -->
							<div>
								<label>Address: <span class="error_msg">*</span></label>
								<textarea id="student_address" name="student_address" placeholder="Address (Max 160 characters)" maxlength="160" tabindex="4" rows="3" style="resize: none;"></textarea>
							</div>
							
							<!-- Student Residence No -->
							<div>
								<label>Residence Phone Number: <span class="error_msg">*</span></label>
								<input id="student_resi_no" name="student_resi_no" type="number" min="0" placeholder="Residence Phone Number" maxlength="10" tabindex="5">
							</div>
							
							<!-- Student Mobile -->
							<div>
								<label>Mobile:</label>
								<input id="student_mobile" name="student_mobile" type="number" min="0" placeholder="Mobile Number" maxlength="10" tabindex="6">
							</div>
							<div id="mobile_no_error" class="error_info">
								<ul>
									<li id="mobile_digits" class="invalid">Only digits are allowed.</li>
									<li id="mobile_length" class="invalid">Length must be 10.</li>
								</ul>
							</div>
							
							<!-- Student gender -->
							<div>
								<label>Gender: <span class="error_msg">*</span></label>
								<select name="gender_select" id="gender_select" tabindex="7">
									<option value="">Select Gender
									<option name="Male" value="Male">Male
									<option name="Female" value="Female">Female
								</select>
							</div>
							
							<!-- Student DOB -->
							<div>
								<label>Date of Birth: <span class="error_msg">*</span></label>
								<input type="text" id="student_dob" name="student_dob" placeholder="Date">
							</div>
							
							<!-- Hidden fields for tbl_student -->
							<div>
								<!-- Foreign Keys -->
								<input id="student_sectionid" type="hidden" name="student_sectionid" value=<%= sectionId %>>
								<input id="student_classid" type="hidden" name="student_classid" value=<%= classId %>>
							</div>
							
							
							<!--  Add Parent Fields -->
							<!-- <label>Parent Details</label> -->
							<!-- Parent Name -->
							<div>
								<label>Parent Name: <span class="error_msg">*</span></label>
								<input id="parent_name" name="parent_name" type="text" placeholder="Parent Name"  maxlength="32" tabindex="9">
							</div>
							<div id="parent_name_error" class="error_info">
								<ul>
									<li id="name_empty" class="invalid">First name can't be empty.</li>
									<li id="name_length" class="invalid">Length must be between 2 to 32.</li>
									<li id="name_invalid" class="invalid">Only alphanumeric characters.</li>
								</ul>
							</div>
							<!-- Parent gender -->
							<div>
								<label>Parent Gender: <span class="error_msg">*</span></label>
								<select name="parent_gender_select" id="parent_gender_select" tabindex="14">
									<option value="">Select Gender
									<option name="Male" value="Male">Male
									<option name="Female" value="Female">Female
								</select>
							</div>
							<!-- Parent Email -->
							<div>
								<label>Parent Email ID: <span class="error_msg">*</span></label>
								<input id="parent_email" name="parent_email" type="email" placeholder="Parent Email ID" maxlength="32" tabindex="10">
							</div>
							<!-- Email Validation error and success message area. -->
							<div id="parent_email_error" class="error_info">
								<ul>
									<li id="email_empty" class="invalid">Email address cannot be empty.</li>
									<li id="email_invalid" class="invalid">Valid email address?</li>
								</ul>
							</div>
							
							<!-- Parent Job -->
							<div>
								<label>Parent Job:</label>
								<input id="parent_job" name="parent_job" type="text" placeholder="Parent Job"  maxlength="32" tabindex="11">
							</div>
							<!-- Parent Mobile -->
							<div>
								<label>Parent Mobile: <span class="error_msg">*</span></label>
								<input id="parent_mobile" name="parent_mobile" type="number" min="0" placeholder="Parent Mobile Number" maxlength="10" tabindex="12">
							</div>
							<div id="parent_mobile_no_error" class="error_info">
								<ul>
									<li id="mobile_digits" class="invalid">Only digits are allowed.</li>
									<li id="mobile_length" class="invalid">Length must be 10.</li>
								</ul>
							</div>
							
							<!-- Parent Office No -->
							<div>
								<label>Parent Office No:</label>
								<input id="parent_office_no" name="parent_office_no" type="number" min="0" placeholder="Parent Office Number" maxlength="10" tabindex="13">
							</div>
							<div>	
								<input type="submit" value="Add Student" class="button" tabindex="13">
							</div>
							
						</form>
					</div>
			
			</div>
		</div>

		<!-- Sidebar -->
		<div id="sidebar">

			<!-- Sidebar Header - Logo & Name -->
			<jsp:include page="../common/sidebarHeader.jsp" />

			<jsp:include page="teacherMenu.jsp" />

			<!-- Sidebar Footer Content -->
			<jsp:include page="../common/sidebarFooter.jsp" />

		</div>

	</div>	
	<script type="text/javascript">
		$(function(){
			$("#studentSettings").addClass("current_page_item");
		});
	</script>
	
	
	<script type="text/javascript">
	$(".submit_errors_msg").hide();
	$(".submit_errors").hide();
	
	function checkFormErrors(){
		if(isAnyFieldEmpty($('#student_fname'),$('#student_lname'),$('#student_roll_no'),$('#student_email'),$('#student_address'),$('#student_resi_no'),
				$('#gender_select'),$('#student_dob'),$('#parent_name'),$('#parent_email'),$('#parent_gender_select'),$('#parent_mobile'))){
			return checkForm($('#submit_name_error'),$('#submit_email_error'));
		}
		return false;
	}
	
	<!-- Email, Name and Password Validation Function Call in validate.js -->
		$("#student_email").keyup(function() {
			isEmailValid($("#student_email"));
		});	
		$("#student_fname").keyup(function() {
			isNameValid($("#student_fname"));
		});
		$("#student_mobile").keyup(function() {
			isMobileValid($("#student_mobile"));
		});
		
		$("#parent_email").keyup(function() {
			isEmailValid($("#parent_email"));
		});	
		$("#parent_name").keyup(function() {
			isNameValid($("#parent_name"));
		});
		$("#parent_mobile").keyup(function() {
			isMobileValid($("#parent_mobile"));
		});
		
	</script>
	</body>
</html>